@charset "utf-8";
$width:640px;
$height:1136px;
@function w($w){
    @return $w/$width*100%;
}
@function h($h){
    @return $h/$height*100%;
}
.page-1{
    width: 100%;
    height: 100%;
    position: relative;
    background: url(../images/bg1.png) no-repeat;
    background-size: contain;
    .page1{
        width: 100%;
        position: absolute;
        top: h(104px);
        p{
            text-align: center;
            color: #ffffff;
            font-size: 16px;
        }
    }
    .img-people1{
        width:w(250px);
        position: absolute;
        top: h(180px);
        left: 50%;
        transform: translateX(-50%);
       
    }
    .img-yun1{
        width:w(112px);
        position: absolute;
        left: w(33px);
        top: h(480px); 
    }
    .img-yun2{
        width:w(63px);
        position: absolute;
        left: w(452px);
        top: h(492px); 
    }
    .img-yun3{
        width:w(112px);
        position: absolute;
        left: w(563px);
        top: h(446px); 
    }
    .input{
        width: w(368px);
        height: h(65px);
        position: absolute;
        p{
            padding-left: 15px;
            padding-top: 3px;
            color:#000000;
            font-size:17px;
        }
    }
    .input-1{
        left: w(55px);
        top: h(682px);
        background: url(../images/input-2_22.png) no-repeat;
        background-size: contain;   
    }
    .input-2{
        left: w(55px);
        top: h(772px);
        background: url(../images/input-2_22.png) no-repeat;
        background-size: contain;   
    }
    .input-3{
        left: w(55px);
        top: h(862px);
        background: url(../images/input-2_22.png) no-repeat;
        background-size: contain;   
    }
    .input-4{
        left: w(55px);
        top: h(952px);
        background: url(../images/input-2_22.png) no-repeat;
        background-size: contain;   
    }
    .img-music-1{
        width:w(80px);
        position: absolute;
        left: w(535px);
        top: h(725px); 
    }
    .img-music-2{
        width:w(40px);
        position: absolute;
        left: w(580px);
        top: h(840px); 
    }
    .img-music-3{
        width:w(40px);
        position: absolute;
        left: w(576px);
        top: h(908px); 
    }
    .img-music-4{
        width:w(46px);
        position: absolute;
        left: w(556px);
        top: h(958px); 
    }
    .img-music-5{
        width:w(52px);
        position: absolute;
        left: w(558px);
        top: h(1006px); 
    }
     .img-dog-1{
        width:w(83px);
        position: absolute;
        left: w(477px);
        top: h(963px); 
    }
    input{
        display: none;
    }
    input[name="input-1"]:checked ~.input-1{
         background: url(../images/input-1_12.png) no-repeat;
         background-size: contain;
    }
     input[name="input-2"]:checked ~.input-2{
         background: url(../images/input-1_12.png) no-repeat;
         background-size: contain;
    }
     input[name="input-3"]:checked ~.input-3{
         background: url(../images/input-1_12.png) no-repeat;
         background-size: contain;
    }
     input[name="input-4"]:checked ~.input-4{
         background: url(../images/input-1_12.png) no-repeat;
         background-size: contain;
    }
    
        
}